
<template>
  <el-form  :label-position="labelPosition"  label-width="180px" ref="form" size="mini">
    <el-form-item prop="approveType" label="审批类型">
      <div class="selectClass">
        <el-radio v-model="form.approveType" label="ONLY">单人</el-radio>
        <el-radio v-model="form.approveType" label="MORE">多人</el-radio>
      </div>
    </el-form-item>

    <el-form-item prop="onlyApprove" label="单人审批方式" v-if="form.approveType === 'ONLY'">
      <div class="selectClass">
        <el-radio v-model="form.onlyApprove" label="FIRST_ONE">发送给列表第一个用户</el-radio>
        <el-radio v-model="form.onlyApprove" label="SELECT">由上一步处理选择</el-radio>
      </div>
    </el-form-item>

    <el-form-item prop="moreApprove" label="多人审批方式"  v-if="form.approveType === 'MORE'">
      <div class="selectClass">
        <el-radio v-model="form.moreApprove" label="ALL">发送给全部用户</el-radio>
        <el-radio v-model="form.moreApprove" label="SELECT">由上一步处理选择</el-radio>
      </div>
    </el-form-item>
    <div class="lineClass"></div>

    <el-form-item prop="moreApprove" label="处理人不存在时" >
      <div class="selectClass">
        <el-radio v-model="form.noUserApprove" label="ERROR">报错</el-radio>
        <el-radio v-model="form.noUserApprove" label="CONTINUE">跳过</el-radio>
      </div>
    </el-form-item>

    <el-form-item prop="sameLastApprove" label="处理人和上一步骤相同时" >
      <div class="selectClass">
        <el-radio v-model="form.sameLastApprove" label="HAND">继续处理</el-radio>
        <el-radio v-model="form.sameLastApprove" label="CONTINUE">跳过</el-radio>
      </div>
    </el-form-item>
    <div class="lineClass"></div>

    <el-form-item prop="conditionFlag" label="是否按条件设置审批人">
      <el-switch
          v-model="form.conditionFlag"
          active-text="是"
          inactive-text="否">
      </el-switch>
    </el-form-item>

    <el-form-item prop="conditionFlag" label="条件"  v-if="form.conditionFlag">
      <el-input size= "small" type="text"  placeholder="" style="width: 90%"  v-model="form.condition"></el-input>
    </el-form-item>

    <el-tabs v-model="activeName" type="card" @tab-click="handleConditionClick" v-if="form.conditionFlag">
      <el-tab-pane label="满足条件" name="first">
        <el-row>
          <el-col :span="20">
              <el-table
                  border
                  size="small"
                  ref="multipleTable"
                  :data="form.conditionTrueUserConfigList"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionTrueChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    label="审批人配置"
                    width="295">
                  <template slot-scope="scope">{{ scope.row.approveUserValue }}</template>
                </el-table-column>
                <el-table-column
                    prop="useDir"
                    label="包含/排除"
                    width="170">
                  <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.useDir"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="包含"
                        inactive-text="排除"
                        disabled
                        active-value="INCLUDE"
                        inactive-value="EXCLUDE">
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <i class="el-icon-bottom icon_class"@click="moveDownY(scope.$index,scope.row)"/>
                    <i class="el-icon-top icon_class" @click="moveUpY(scope.$index,scope.row)"/>
                  </template>
                </el-table-column>
              </el-table>
          </el-col>

          <el-col :span="4">
            <el-button type="primary"  size="small" @click="addY">添加</el-button>
            <el-button type="primary"  size="small" @click="updateY">修改</el-button>
            <br/>
            <br/>
            <el-button type="primary"  size="small" @click="removeY">删除</el-button>
            <br/>
            <br/>
            <approvalUserAdd ref="approvalUserAddY" @success="addYRecord"/>
            <approvalUserUpdate ref="approvalUserUpdateY" @success="updateYRecord"/>
          </el-col>
        </el-row>

      </el-tab-pane>
      <el-tab-pane label="不满足条件" name="second">
        <el-row>
          <el-col :span="20">
            <el-table
                border
                size="small"
                ref="multipleTable"
                :data="form.conditionFalseUserConfigList"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionFalseChange">
              <el-table-column
                  type="selection"
                  width="55">
              </el-table-column>
              <el-table-column
                  label="审批人配置"
                  width="295">
                <template slot-scope="scope">{{ scope.row.approveUserValue }}</template>
              </el-table-column>
              <el-table-column
                  prop="useDir"
                  label="包含/排除"
                  width="170">
                <template slot-scope="scope">
                  <el-switch
                      v-model="scope.row.useDir"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-text="包含"
                      inactive-text="排除"
                      disabled
                      active-value="INCLUDE"
                      inactive-value="EXCLUDE">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <i class="el-icon-bottom icon_class"@click="moveDownN(scope.$index,scope.row)"/>
                  <i class="el-icon-top icon_class" @click="moveUpN(scope.$index,scope.row)"/>
                </template>
              </el-table-column>
            </el-table>
          </el-col>

          <el-col :span="4">
            <el-button type="primary"  size="small" @click="addN">添加</el-button>
            <el-button type="primary"  size="small" @click="updateN">修改</el-button>
            <br/>
            <br/>
            <el-button type="primary"  size="small" @click="removeN">删除</el-button>
            <approvalUserAdd ref="approvalUserAddN" @success="addNRecord"/>
            <approvalUserUpdate ref="approvalUserUpdateN" @success="updateNRecord"/>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>


    <el-row v-if="form.conditionFlag === false">
      <el-col :span="20">
        <el-table
            border
            size="small"
            ref="multipleTable"
            :data="form.userConfigList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="approveUserValue"
              label="审批人配置"
              width="295">
            <template slot-scope="scope">{{ scope.row.approveUserValue }}</template>
          </el-table-column>
          <el-table-column
              prop="useDir"
              label="包含/排除"
              width="170">
            <template slot-scope="scope">
              <el-switch
                  v-model="scope.row.useDir"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="包含"
                  inactive-text="排除"
                  disabled
                  active-value="INCLUDE"
                  inactive-value="EXCLUDE">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <i class="el-icon-bottom icon_class"@click="moveDown(scope.$index,scope.row)"/>
              <i class="el-icon-top icon_class" @click="moveUp(scope.$index,scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="4">
        <el-button type="primary"  size="small" @click="add">添加</el-button>
        <el-button type="primary"  size="small" @click="update">修改</el-button>
        <br/>
        <br/>
        <el-button type="primary"  size="small" @click="remove">删除</el-button>
      </el-col>
      <approvalUserAdd ref="approvalUserAdd" @success="addRecord"/>
      <approvalUserUpdate ref="approvalUserUpdate" @success="updateRecord"/>
    </el-row>


    <br/><br/><br/>
  </el-form>

</template>
<script>
import ApprovalUserAdd   from "./ApprovalUserAdd.vue";
import ApprovalUserUpdate from './ApprovalUserUpdate.vue';
import { utils } from '../../utils/common.js'

export default {
  components: {
    ApprovalUserAdd,
    ApprovalUserUpdate
  },
  data(){
    return {
      node:{},
      activeName:'first',
      labelPosition:'left',
      form: this.defaultForm(),
      nowApprovalUserY:{},
      nowApprovalUserN:{},
      nowApprovalUser:{}
    }
  },
  created(){

  },
  methods:{
    defaultForm(){
      return {
          approveType:"ONLY",
          onlyApprove:"",
          moreApprove:"",
          noUserApprove:"ERROR",
          sameLastApprove:"CONTINUE",
          conditionFlag:false,
          condition:"",
          userConfigList:[],
          conditionTrueUserConfigList:[],
          conditionFalseUserConfigList:[]
      }
    },
    addY(){
      this.$refs["approvalUserAddY"].showDialog({conditionRes:"TRUE"});
    },
    updateY(){
      if(this.nowApprovalUserY == null || this.nowApprovalUserY.length === 0 || JSON.stringify(this.nowApprovalUserY) === "{}"){
        this.$message.warning("请选择记录");
        return;
      }
      this.$refs["approvalUserUpdateY"].showDialog(this.nowApprovalUserY[0]);
    },
    removeY(){
      this.form.conditionTrueUserConfigList.splice(this.form.conditionTrueUserConfigList.indexOf(this.nowApprovalUserY) - 1,1);
    },
    moveUpY(index,row){
      if (index > 0) {
        const upDate = this.form.conditionTrueUserConfigList[index - 1]
        this.form.conditionTrueUserConfigList.splice(index - 1, 1)
        this.form.conditionTrueUserConfigList.splice(index, 0, upDate)
      } else {
        alert('已经是第一条，不可上移')
      }
    },
    moveDownY(index,row){
      if ((index + 1) === this.form.conditionTrueUserConfigList.length) {
        alert('已经是最后一条，不可下移')
      } else {
        const downDate = this.form.conditionTrueUserConfigList[index + 1]
        this.form.conditionTrueUserConfigList.splice(index + 1, 1)
        this.form.conditionTrueUserConfigList.splice(index, 0, downDate)
      }
    },
    addN(){
      this.$refs["approvalUserAddN"].showDialog({conditionRes:"FALSE"});
    },
    updateN(){
      if(this.nowApprovalUserN == null || this.nowApprovalUserN.length === 0 || JSON.stringify(this.nowApprovalUserN) === "{}"){
        this.$message.warning("请选择记录");
        return;
      }
      this.$refs["approvalUserUpdateN"].showDialog(this.nowApprovalUserN[0]);
    },
    removeN(){
      this.form.conditionFalseUserConfigList.splice(this.form.conditionFalseUserConfigList.indexOf(this.nowApprovalUserN) - 1,1);
    },
    moveUpN(){
      if (index > 0) {
        const upDate = this.form.conditionFalseUserConfigList[index - 1]
        this.form.conditionFalseUserConfigList.splice(index - 1, 1)
        this.form.conditionFalseUserConfigList.splice(index, 0, upDate)
      } else {
        alert('已经是第一条，不可上移')
      }
    },
    moveDownN(){
      if ((index + 1) === this.form.conditionFalseUserConfigList.length) {
        alert('已经是最后一条，不可下移')
      } else {
        const downDate = this.form.conditionFalseUserConfigList[index + 1]
        this.form.conditionFalseUserConfigList.splice(index + 1, 1)
        this.form.conditionFalseUserConfigList.splice(index, 0, downDate)
      }
    },
    add(){
      this.$refs["approvalUserAdd"].showDialog({conditionRes:"NO"});
    },
    update(){
      if(this.nowApprovalUser == null || this.nowApprovalUser.length === 0 || JSON.stringify(this.nowApprovalUser) === "{}"){
        this.$message.warning("请选择记录");
        return;
      }
      this.$refs["approvalUserUpdate"].showDialog(this.nowApprovalUser[0]);
    },
    remove(){
      this.form.userConfigList.splice(this.form.userConfigList.indexOf(this.nowApprovalUser)-1,1);
    },
    moveUp(){
      if (index > 0) {
        const upDate = this.form.userConfigList[index - 1]
        this.form.userConfigList.splice(index - 1, 1)
        this.form.userConfigList.splice(index, 0, upDate)
      } else {
        alert('已经是第一条，不可上移')
      }
    },
    moveDown(){
      if ((index + 1) === this.form.userConfigList.length) {
        alert('已经是最后一条，不可下移')
      } else {
        const downDate = this.form.userConfigList[index + 1]
        this.form.userConfigList.splice(index + 1, 1)
        this.form.userConfigList.splice(index, 0, downDate)
      }
    },
    addRecord(row){
      this.form.userConfigList.push(row);
      this.analysisUserName(this.form.userConfigList);
    },
    addYRecord(row){
      this.form.conditionTrueUserConfigList.push(row);
      this.analysisUserName(this.form.conditionTrueUserConfigList);
    },
    addNRecord(row){
      this.form.conditionFalseUserConfigList.push(row);
      this.analysisUserName(this.form.conditionFalseUserConfigList);
    },
    updateRecord(row){
      let index = this.form.userConfigList.findIndex(obj=>obj.cid === row.cid);
      this.form.userConfigList.splice(index, 1, row);
      this.form.userConfigList = JSON.parse(JSON.stringify(this.form.userConfigList));
      this.analysisUserName(this.form.userConfigList);
    },
    updateYRecord(row){
      let index = this.form.conditionTrueUserConfigList.findIndex(obj=>obj.cid === row.cid);
      this.form.conditionTrueUserConfigList[index] = row;
      this.form.conditionTrueUserConfigList = JSON.parse(JSON.stringify(this.form.conditionTrueUserConfigList));
      this.analysisUserName(this.form.conditionTrueUserConfigList);
    },
    updateNRecord(row){
      let index = this.form.conditionFalseUserConfigList.findIndex(obj=>obj.cid === row.cid);
      this.form.conditionFalseUserConfigList[index] = row;
      this.form.conditionFalseUserConfigList = JSON.parse(JSON.stringify(this.form.conditionFalseUserConfigList));
      this.analysisUserName(this.form.conditionFalseUserConfigList);
    },
    handleConditionClick(tab){

    },
    handleSelectionChange(row){
      this.nowApprovalUser = row;
    },
    handleSelectionTrueChange(row){
      this.nowApprovalUserY = row;
    },
    handleSelectionFalseChange(row){
      this.nowApprovalUserN = row;
    },
    showPro(node){
      this.node = node;
      if(node == null){
        this.form.userConfigList = [];
        this.form.conditionTrueUserConfigList = [];
        this.form.conditionFalseUserConfigList = [];
        return;
      }
      node.approveConfig = node.approveConfig == null ? this.defaultForm() : node.approveConfig;
      this.form = node.approveConfig;

      if(this.form.userConfigList == null){
        this.form.userConfigList = [];
      }
      if(this.form.conditionTrueUserConfigList == null){
        this.form.conditionTrueUserConfigList = [];
      }
      if(this.form.conditionFalseUserConfigList == null){
        this.form.conditionFalseUserConfigList = [];
      }
      this.analysisUserName(this.form.userConfigList);
      this.analysisUserName(this.form.conditionTrueUserConfigList);
      this.analysisUserName(this.form.conditionFalseUserConfigList);
    },
    analysisUserName(userList) {
      if(userList == null){
        return;
      }
      userList.forEach(config => {
        if(config.useDir == null || config.useDir === ''){
          config.useDir = 'INCLUDE';
        }
        if(config.id != null && config.id !== ''){
          config.cid = config.id;
        }
        config.approveUserValue = config.approveUser;
        let userType = config.userType;
        if(userType === 'ACCOUNT'){
          config.approveUserValue = JSON.parse(config.approveUser).username;
        }else if(userType === 'VARIABLE'){
          config.approveUserValue = "变量用户: "+config.approveUserValue;
        }else if(userType === 'NODE_APPROVE'){
          config.approveUserValue = "某个节点审批人";
        }else if(userType === 'ALL_APPROVE'){
          config.approveUserValue = "所有流程审批人";
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.selectClass{
  //border: 1px solid lightgray;
  padding-left: 5px;
  padding-right: 5px;
}
.lineClass{
  border: 1px solid lightgray;
  height: 1px;
  margin-right: 10px;
}
</style>